<style>
    html{
        background-color: #f2f2f2;
    }
    .content-body{
        background-color: transparent;
    }
    /* 卡片面板 */
    .layui-card{margin-bottom: 10px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
    .layui-card:last-child{margin-bottom: 0;}
    .layui-card-header{position: relative; height: 42px; line-height: 42px; padding: 0 15px; border-bottom: 1px solid #f6f6f6; color: #333; border-radius: 2px 2px 0 0; font-size: 14px;}
    .layui-card-body{position: relative; padding: 10px 15px; line-height: 24px;}
    th,td{
        text-align: center;
    }
</style>

<div class="container-fluid">

    <div class="row layui-card">
        <div class="layui-card-body">
            <a href="{:url('index/index')}">主页</a>
            <span>/</span>
            <span>年度、月度统计</span>
        </div>
    </div>

    <div class="row layui-card">
        <div class="layui-card-header" style="height: 45px;">
            <div class="form-inline">
                <label>统计时间</label>
                <input name="start_yearmonth" maxlength="4" value="{$start_yearmonth}" class="form-control" style="width: 120px;">
                &nbsp;-&nbsp;
                <input name="end_yearmonth" maxlength="4" value="{$end_yearmonth}" class="form-control" style="width: 120px;">
                &nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button class="btn btn-info btn-sm" onclick="getInfo()">统计</button>
                &nbsp;&nbsp;<button class="btn btn-default btn-sm">打印表格</button>
                &nbsp;&nbsp;<button class="btn btn-success btn-sm">导出Excel</button>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="col-sm-6">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th colspan="3">年度统计</th>
                    </tr>
                    <tr>
                        <th>时间</th>
                        <th>数量（单位：件）</th>
                        <th>价值（单位：万元）</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="year_list" id="vo"}
                        <tr>
                            <td height="25">{$vo[0]}</td>
                            <td height="25">{$vo[2]}</td>
                            <td height="25">{$vo[3]}</td>
                        </tr>
                    {/volist}
                    </tbody>
                </table>
            </div>
            <div class="col-sm-6">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th colspan="3">月度统计</th>
                    </tr>
                    <tr>
                        <th>时间</th>
                        <th>数量（单位：件）</th>
                        <th>价值（单位：万元）</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="month_list" id="vo"}
                        <tr>
                            <td height="25">{$vo[0]}</td>
                            <td height="25">{$vo[1]}</td>
                            <td height="25">{$vo[2]}</td>
                        </tr>
                    {/volist}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="row layui-card">
        <div id="chart-num" style="width: 100%;height: 600px;padding-top: 30px"></div>
    </div>
    <div class="row layui-card">
        <div id="chart-price" style="width: 100%;height: 600px;padding-top: 30px"></div>
    </div>
</div>

<script src="__STATIC__/js/echarts.min.js"></script>

<script>
    var year_list_info = {:json_encode($year_list)};
    var month_list_info = {:json_encode($month_list)};
    var numChart = echarts.init(document.getElementById('chart-num'));
    var priceChart = echarts.init(document.getElementById('chart-price'));
    // 学院列表 数据列表
    var year_list = [];
    var series_num_year = [];
    var series_price_year = [];
    var month_list = [];
    var series_num_month = [];
    var series_price_month = [];

    for (var i in year_list_info)
    {
        year_list.push(year_list_info[i][0]);
        series_num_year.push(year_list_info[i][2]);
        series_price_year.push(year_list_info[i][3]);
    }

    for (var i in month_list_info)
    {
        month_list.push(month_list_info[i][0]);
        series_num_month.push(month_list_info[i][1]);
        series_price_month.push(month_list_info[i][2]);
    }

    // 指定图表的配置项和数据--数量
    var option_num = {
        title: {
            text: '天津大学资产年度统计'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            }
        },
        legend: {
            data:['数量（单位：件）','价值（单位：万元）']
        },
        xAxis: {
            data: year_list
        },
        yAxis: {},
        series: [{
            name: '数量（件）',
            type: 'bar',
            barWidth:"20%",
            data: series_num_year
        },{
            name: '价值（万元）',
            type: 'bar',
            barWidth:"20%",
            data: series_price_year
        }]
    };

    // 指定图表的配置项和数据--价值

    var option_price = {
        title: {
            text: '天津大学资产月度统计'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            }
        },
        legend: {
            data:['数量（单位：件）','价值（单位：万元）']
        },
        xAxis: {
            data: month_list
        },
        yAxis: {},
        series: [{
            name: '数量（件）',
            type: 'bar',
            barWidth:"20%",
            data: series_num_month
        },{
            name: '价值（万元）',
            type: 'bar',
            barWidth:"20%",
            data: series_price_month
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    numChart.setOption(option_num);
    priceChart.setOption(option_price);
    // 获取统计数据
    function getInfo() {
        var start_yearmonth = $("input[name=start_yearmonth]").val();
        var end_yearmonth = $("input[name=end_yearmonth]").val();

        var url = "{:url('statistics/yearMonthInfo')}?start_yearmonth="+start_yearmonth+"&end_yearmonth="+end_yearmonth;
        location.href = url;
    }
</script>